<template>
  <!-- 优惠券组件 -->
  <div v-if="type == 'primary'" class="mod-topsearch fixed-top clearfix">
    <div class="primary-topsearch-left" @click="showAreaSelect">
      <span class="tx toe tac mlr-20">{{ locationCity }}</span>
      <svg-icon icon-class="location" />
    </div>
    <van-field
      v-model="searchValue"
      clearable
      placeholder="请输入关键词搜索"
      left-icon="search"
      @click-left-icon="search"
    />
    <!-- <cube-input v-model="searchValue" placeholder="输入关键词搜索" :clearable="true">
      <div slot="prepend" @click="search">
        <svg-icon icon-class="search" />
      </div>
    </cube-input>-->
    <div class="primary-topsearch-right" @click="$router.push('/home/message')">
      <svg-icon icon-class="dot" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopSearch',
  props: {
    // 头部搜索类型
    type: {
      type: String,
      required: true,
      default: 'primary'
    },
    locationCity: {
      type: String
    }
  },
  data() {
    return {
      msg: '123',
      searchValue: ''
    }
  },
  methods: {
    search() {
      // console.log(this.searchValue);
      this.$emit('search', this.searchValue)
    },
    showAreaSelect() {
      this.$emit('showAreaSelect', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell {
  width: auto;
  max-width: 100%;
  background-color: #ededed;
  border-radius: 30px;
  margin-right: 50px;
  margin-top: 8px;
  padding: 0.06rem 0.2rem;
}
</style>

